<template>
  <div class="search">
    <header>
      <form action="/">
        <van-search
          v-model="searchId"
          ref="input"
          show-action
          placeholder="请输入搜索关键词"
          @blur="onBlur"
          @cancel="onCancel"
        />
      </form>
      <div class="list" v-show="isShow" ref="searchText">
        <li v-for="(v, i) in newlist" :key="i">{{ searchId }}</li>
      </div>
    </header>
  </div>
</template>

<script>
import axios from "../utils/axios";
export default {
  data() {
    return {
      list: [],
      searchId: "", /// 搜索关键词
      isShow: false,
    };
  },
  watch: {
    /// 实时监听搜索框变化
    searchId: function () {
      if (this.searchId === "") {
        this.$refs.searchText.innerHTML = "";
      }
    },
    deep: true,
  },
  methods: {
    onBlur(val) {
      this.value = val;
      if(this.value===this.searchId){
        this.$refs.searchText.innerHTML=this.searchId
        this.$router.go(-1)
      }
    },
    onCancel() {
      this.$router.push("/home");
    },
    getSearch() {
      this.isShow = !this.isShow;
      axios
        .get(
          `/area/community?name=%E5%8C%97%E4%BA%AC&id=AREA%7C88cff55c-aaa4-e2e0`
        )
        .then((res) => {
          this.list = res.data.body;
          console.log(res, "搜索");
        })
    },
  },
  created() {
    this.getSearch();
  },
  computed: { /// 过滤符合条件的关键字
    newlist() {
      // return this.list.filter(
      //   (value) => value.streetName.indexOf(this.searchId) !== -1
      // )
      return this.list.filter((value) => {
        if (value.streetName.indexOf(this.searchId) > -1) {
          return this.searchId 
        } else if ( value.streetName.indexOf(this.searchId)!== this.searchId) {
          this.$refs.searchText.innerHTML = "无此数据！！！";
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.search {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  form {
    width: 100%;
    height: 1.2rem;
  }
  .list {
    flex: 1;
    overflow-y: scroll;
    li {
      width: 100%;
      height: 0.8rem;
      line-height: 0.8rem;
      padding-left: 0.2rem;
    }
  }
}
</style>